<template>
  <div>
    <van-search
      class="index-top-search"
      show-action
      placeholder="请输入小区或地址"
      background="#21b97a"
    >
      <template #left>
        <van-icon name="arrow-left" @click="$router.push('/')" />
      </template>
      <template #label>
        <router-link to="/city">
          <span class="mytz">{{ city.label }}</span>
          <span class="index-top-icon-left">▼</span>
          <span class="index-top-l">|</span></router-link
        >
      </template>
      <template #action
        ><van-icon
          class="index-top-icon-right"
          size="25"
          name="location-o"
          @click="$router.push('/map')"
      /></template>
    </van-search>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value" title="区域" ref="item">
        <van-picker
          show-toolbar
          :columns="columns1"
          toolbar-position="bottom"
          @cancel="onCancel"
          @confirm="onConfirm"
        />
      </van-dropdown-item>
      <van-dropdown-item v-model="value1" title="方式" ref="item1">
        <van-picker
          show-toolbar
          :columns="columns2"
          toolbar-position="bottom"
          @confirm="onConfirm1"
          @cancel="onCancel1"
        />
      </van-dropdown-item>
      <van-dropdown-item v-model="value2" title="租金" ref="item2">
        <van-picker
          show-toolbar
          :columns="columns3"
          toolbar-position="bottom"
          @confirm="onConfirm2"
          @cancel="onCancel2"
        />
      </van-dropdown-item>
      <van-dropdown-item
        v-model="value3"
        :overlay="false"
        title="筛选"
        ref="item3"
      >
        <van-popup
          v-model="show"
          :overlay="false"
          position="right"
          :style="{ height: '100%', weight: '75%' }"
        >
          <HouseBu :zhi="quanshuju.body.roomType" :title="hux"></HouseBu>
          <HouseBu :zhi="quanshuju.body.oriented" :title="louc"></HouseBu>
          <HouseBu :zhi="quanshuju.body.floor" :title="chaox"></HouseBu>
          <HouseBu
            :zhi="quanshuju.body.characteristic"
            :title="liangd"
          ></HouseBu>
          <van-row>
            <van-col span="8">
              <van-button block @click="onCancel3">清除</van-button>
            </van-col>
            <van-col span="16">
              <van-button block type="primary" @click="onConfirm3"
                >确定</van-button
              >
            </van-col>
          </van-row>
        </van-popup>
      </van-dropdown-item>
    </van-dropdown-menu>
    <van-list
      v-model="loading"
      @load="onLoad"
      :finished="finished"
      finished-text="没有更多了"
    >
      <ul>
        <li
          v-for="(item, index) in houseList"
          :key="index * 100"
          @click="cxfw(item.houseCode)"
        >
          <div class="left">
            <img :src="'http://liufusong.top:8080' + item.houseImg" alt="" />
          </div>
          <div class="rigth">
            <h4>{{ item.title }}</h4>
            <p>{{ item.desc }}</p>
            <van-tag
              color="#e1f5f8"
              text-color="#4dc4d1"
              v-for="(item, index) in item.tags"
              :key="index"
              >{{ item }}</van-tag
            ><br />
            <i
              ><span>{{ item.price }}</span
              >元/月</i
            >
          </div>
        </li>
      </ul>
    </van-list>
  </div>
</template>

<script>
import HouseBu from '@/components/housebu.vue'
import { getHouse, getIf, getJqhouse, getzhu } from '@/api/article'
export default {
  name: 'MyHouse',
  components: {
    HouseBu
  },
  props: {},
  data() {
    return {
      kai: 1,
      jie: 20,
      loading: false,
      finished: false,
      hux: '户型',
      louc: '楼层',
      chaox: '朝向',
      liangd: '亮点',
      quanshuju: {
        body: {
          roomType: [],
          oriented: [],
          floorV: [],
          characteristic: []
        }
      },
      obj: {},
      newnew: '',
      show: true,
      columns1: [],
      columns2: [],
      columns3: [],
      value: 1,
      value1: 1,
      value2: 1,
      value3: 1,
      city: JSON.parse(window.localStorage.getItem('city')) || {
        label: '上海',
        value: 'AREA|dbf46d32-7e76-1196',
        pinyin: 'shanghai',
        short: 'sh'
      },
      houseList: []
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res1 = await getIf(JSON.parse(window.localStorage.getItem('city')))
    console.log(res1)
    this.quanshuju = res1
    console.log(this.quanshuju)
    // 实用
    // const newList = JSON.parse(JSON.stringify(this.quanshuju).replace(/label/g, 'text'))
    // console.log(newList)
    // 开始
    const { body: hs } = res1
    const newData = []
    const showTime = function (newData, oldData) {
      for (const k in oldData) {
        if (Object.prototype.toString.call(oldData[k]) === '[object Array]') {
          newData[k] = []
          showTime(newData[k], oldData[k])
        } else if (
          Object.prototype.toString.call(oldData[k]) === '[object Object]'
        ) {
          newData[k] = {}
          showTime(newData[k], oldData[k])
        } else {
          k === 'label'
            ? (newData.text = oldData[k])
            : (newData[k] = oldData[k])
        }
      }
    }
    showTime(newData, hs)
    console.log(newData)
    // 要求所有为'label'的属性名都变成'text'
    newData.area.children[0].children = ['']
    this.columns1.push(JSON.parse(JSON.stringify(newData.area)))
    newData.subway.children[0].children = ['']
    this.columns1.push(JSON.parse(JSON.stringify(newData.subway)))
    this.columns2 = [...JSON.parse(JSON.stringify(newData.rentType))]
    this.columns3 = [...JSON.parse(JSON.stringify(newData.price))]
    this.newnew = newData
  },
  methods: {
    async onLoad() {
      console.log('到底了')
      const kk = JSON.parse(window.localStorage.getItem('city'))
      const res = await getHouse(kk, this.kai, this.jie)
      console.log(res)
      this.houseList.push(...res.body.list)
      this.loading = false
      this.kai += 20
      this.jie += 20
      if (res.body.list.length === 0) {
        this.finished = true
      }
    },
    async cxfw(code) {
      const zhu = await getzhu(code)
      console.log(zhu)
      this.$router.push({ path: `/housexq/${code}` })
    },
    async onConfirm(value, index) {
      this.$Toast(`当前值：${value}, 当前索引：${index}`)
      console.log(value)
      const length = index.length
      console.log(index)
      // 发送区域 地铁信息
      if (index[0] === 1) {
        if (index[length - 1] === 0) {
          if (index[length - 2] === 0) {
            return
          } else {
            console.log(value[1])
            console.log(this.newnew)
            const ree = this.newnew.subway.children.find(
              (item) => item.text === value[1]
            )
            console.log(ree) // 此处有问题 要判断
            this.obj.dizhi = ree.value
            const res = await getJqhouse(
              JSON.parse(window.localStorage.getItem('city')),
              this.obj
            )
            console.log(res)
            this.houseList = [...res.body.list]
          }
        } else {
          console.log(value[2])
          let resqq = null
          for (let j = 1; j <= 12; j++) {
            resqq = this.newnew.subway.children[j].children.find(
              (item) => item.text === value[2]
            )
            if (resqq) {
              j = 13
            }
          }
          console.log(resqq.value)
          this.obj.dizhi1 = resqq.value
          const res22 = await getJqhouse(
            JSON.parse(window.localStorage.getItem('city')),
            this.obj
          )
          console.log(res22)
          this.houseList = [...res22.body.list]
        }
      } else {
        if (index[length - 1] === 0) {
          if (index[length - 2] === 0) {
            return
          } else {
            console.log(value[1])
            console.log(this.newnew)
            const ree = this.newnew.area.children.find(
              (item) => item.text === value[1]
            )
            console.log(ree.value) // 此处有问题 要判断
            this.obj.dizhi = ree.value
            const res = await getJqhouse(
              JSON.parse(window.localStorage.getItem('city')),
              this.obj
            )
            console.log(res)
            this.houseList = [...res.body.list]
          }
        } else {
          console.log(value[2])
          let resqq = null
          for (let j = 1; j <= 12; j++) {
            resqq = this.newnew.area.children[j].children.find(
              (item) => item.text === value[2]
            )
            if (resqq) {
              j = 13
            }
          }
          console.log(resqq.value)
          this.obj.dizhi1 = resqq.value
          const res22 = await getJqhouse(
            JSON.parse(window.localStorage.getItem('city')),
            this.obj
          )
          console.log(res22)
          this.houseList = [...res22.body.list]
        }
      }

      this.$refs.item.toggle()
    },
    onCancel() {
      this.$Toast('取消')
      this.$refs.item.toggle()
    },
    async onConfirm1(value, index) {
      this.$Toast(`当前值：${value.text}, 当前索引：${index}`)
      console.log(value.value)
      this.obj.hz = value.value
      const res = await getJqhouse(
        JSON.parse(window.localStorage.getItem('city')),
        this.obj
      )
      console.log(res)
      this.houseList = [...res.body.list]
      this.$refs.item1.toggle()
    },
    onCancel1() {
      this.$Toast('取消')
      this.$refs.item1.toggle()
    },
    async onConfirm2(value, index) {
      this.$Toast(`当前值：${value.text}, 当前索引：${index}`)
      console.log(value.value)

      const res = await getJqhouse(
        JSON.parse(window.localStorage.getItem('city')),
        this.obj,
        value.value
      )
      console.log(res)
      this.houseList = [...res.body.list]
      this.$refs.item2.toggle()
    },
    onCancel2() {
      this.$Toast('取消')
      this.$refs.item2.toggle()
    },
    onConfirm3(value, index) {
      this.$Toast(`当前值：${value}, 当前索引：${index}`)
      this.$refs.item3.toggle()
    },
    onCancel3() {
      this.$Toast('取消')
      this.$refs.item3.toggle()
    }
  }
}
</script>

<style scoped lang="less">
::v-deep [data-v-2ca42b0d] .van-dropdown-menu__bar--opened {
  z-index: 0;
}
::v-deep .van-dropdown-menu__bar--opened {
  z-index: 0;
}

li {
  display: flex;
  padding: 15px;
  width: 100%;
  /* background-color: red; */
  height: 120px;
  border-top: 1px solid #ccc;
  .rigth {
    p {
      color: #ccc;
      font-size: 13px;
    }
    i {
      color: red;
      font-size: 12px;
      span {
        font-weight: 700;
        font-size: 20px;
      }
    }
  }
  .left {
    padding-right: 7px;
    img {
      height: 80px;
      width: 110px;
    }
  }
}
::v-deep .van-dropdown-menu__title--active {
  color: #21b97a;
}
::v-deep .van-picker__cancel {
  width: 33%;
  background-color: white;
  color: #21b97a;
  border-top: 1px solid #f2f2f2;
}
::v-deep .van-picker__confirm {
  width: 66%;
  background-color: #21b97a;
  color: white;
}
.van-icon-location-o:before {
  margin-top: 4px;
  color: white;
}
.van-icon-arrow-left:before {
  color: white;
  font-size: 19px;
}
.van-search__content {
  margin-left: 2vw;
}
.mytz {
  color: #000;
}
.index-top-l {
  padding-left: 11px;
  padding-right: 5px;
  color: rgba(62, 59, 59, 0.262);
}
.index-top-icon-left {
  font-size: 12px;
  padding-left: 3px;
  color: gray;
}
.van-list {
  margin-bottom: 50px;
}
</style>
